{% extends "zato/index.html" %}

{% block html_title %}Pub/sub endpoints{% endblock %}

{% block "extra_css" %}
    <link rel="stylesheet" type="text/css" href="/static/css/jquery.alerts.css">
{% endblock %}

{% block "extra_js" %}

    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.tablesorter.min.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.cookie.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.alerts.min.js"></script>

    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/common.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/pubsub/endpoint.js"></script>

    <script nonce="{{ CSP_NONCE }}" type="text/javascript">

    $.fn.zato.data_table.get_columns = function() {
        return [
            '_numbering',
            '_selection',
            'name',
            'role',
            '_topic_patterns_html',
            '_client_html',
            '_topics',
            '_queues',
            '_edit',
            '_delete',
            'id',
            'endpoint_type',
            'is_internal',
            'is_active',
            'topic_patterns',
            'security_id',
            'service_id',
            'ws_channel_id',
        ]
    }
    </script>

{% endblock %}

{% block "content" %}
<h2 class="zato">Pub/sub endpoints</h2>

{% if not zato_clusters %}
    {% include "zato/no-clusters.html" %}
{% else %}

    <div id="user-message-div" style='display:none'><pre id="user-message" class="user-message"></pre></div>

{% include "zato/search-form.html" with page_prompt="Show endpoints"%}

    {% if cluster_id %}

        <div class='page_prompt' style="clear:left">
            <a href="javascript:$.fn.zato.pubsub.endpoint.create()">Create a new pub/sub endpoint</a>
        </div>

        <div id="markup">
            <table id="data-table">
                <thead>
                    <tr class='ignore'>
                        <th style="width:5%">&nbsp;</th>
                        <th>&nbsp;</th>
                        <th><a href="#">Name</a></th>
                        <th><a href="#">Role</a></th>
                        <th style="width:25%"><a href="#">Topics allowed</a></th>
                        <th style="width:25%"><a href="#">Client</a></th>
                        <th>Pub</th>
                        <th>Sub</th>
                        <th style="width:5%">&nbsp;</th>
                        <th style="width:5%">&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                </thead>

                <tbody>
                {% if items %}
                {% for item in items %}
                    <tr class="{% cycle 'odd' 'even' %}" id='tr_{{ item.id }}'>
                        <td class='numbering'>&nbsp;</td>
                        <td class="impexp"><input type="checkbox" /></td>
                        <td>{% if item.is_internal %}<span class="form_hint">{{ item.name }}</span>{% else %}{{ item.name }}{% endif %}</td>
                        <td>{% if item.is_internal %}<span class="form_hint">{{ item.role }}</span>{% else %}{{ item.role }}{% endif %}</td>
                        <td>
                            {% if item.is_internal %}
                                <span class="form_hint">{{ item.topic_patterns_html|safe|default:'---' }}</span>
                            {% else %}
                                {{ item.topic_patterns_html|safe|default:'<span class="form_hint">---</span>' }}
                            {% endif %}
                        </td>
                        <td>
                            {% if item.client_html %}
                                {% if item.is_internal %}<span class="form_hint">{% endif %}
                                    {{ item.client_html|safe }}
                                {% if item.is_internal %}</span>{% endif %}
                            {% else %}
                                {% if item.is_internal and item.endpoint_type == "srv" %}
                                    Internal
                                {% else %}
                                    {{ item.endpoint_type|upper }}
                                {% endif %}
                            {% endif %}
                        </td>
                        <td>
                            {% if 'pub' in item.role %}
                                <a href="{% url "pubsub-endpoint-topics" cluster_id item.id item.name|slugify %}?cluster={{ cluster_id }}">{% if item.is_internal %}<span class="form_hint">Topics</span>{% else %}Topics{% endif %}</a>
                            {% else %}
                                <span class="form_hint">---</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if 'sub' in item.role %}
                                <a href="{% url "pubsub-endpoint-queues" cluster_id item.id item.name|slugify %}?cluster={{ cluster_id }}">{% if item.is_internal %}<span class="form_hint">Queues</span>{% else %}Queues{% endif %}</a>
                            {% else %}
                                <span class="form_hint">---</span>
                            {% endif %}
                        </td>

                        <td>
                            {% if item.is_internal %}
                                <span class="form_hint">Edit</span>
                            {% else %}
                                <a href="javascript:$.fn.zato.pubsub.endpoint.edit('{{ item.id }}')">Edit</a>
                            {% endif %}
                        </td>
                        <td>
                            {% if item.is_internal %}
                                <span class="form_hint">Delete</span>
                            {% else %}
                                <a href="javascript:$.fn.zato.pubsub.endpoint.delete_('{{ item.id }}')">Delete</a>
                            {% endif %}
                        </td>
                        <td class='ignore item_id_{{ item.id }}'>{{ item.id }}</td>
                        <td class='ignore'>{{ item.endpoint_type }}</td>
                        <td class='ignore'>{{ item.is_internal }}</td>
                        <td class='ignore'>{{ item.is_active }}</td>
                        <td class='ignore'>{{ item.topic_patterns|default:'' }}</td>
                        <td class='ignore'>{{ item.security_id|default:'' }}</td>
                        <td class='ignore'>{{ item.service_id|default:'' }}</td>
                        <td class='ignore'>{{ item.ws_channel_id|default:'' }}</td>
                    </tr>
                {% endfor %}
                {% else %}
                    <tr class='ignore'>
                        <td colspan='18'>No results</td>
                    </tr>
                {% endif %}

                </tbody>
            </table>
        </div>

{% include "zato/paginate/action-panel.html" %}

        <div id="create-div" class='data-popup ignore'>
            <div class="bd">
                <form novalidate action="{% url "pubsub-endpoint-create" %}" method="post" id="create-form">
                    <table class="form-data">

                        <tr>
                            <td style="vertical-align:middle; width:15%">Name</td>
                            <td>{{ create_form.name }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle; width:15%">Type</td>
                            <td>{{ create_form.endpoint_type }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">Role</td>
                            <td>{{ create_form.role }} </td>
                        </tr>

                        {% comment %} --------- REST --------- {% endcomment %}
                        <tr id="tr_toggle_security_id" class="zato-toggle zato-toggle-rest zato-toggle-visible">
                            <td style="vertical-align:middle">API client credentials</td>
                            <td>{{ create_form.security_id }} </td>
                        </tr>

                        {% comment %} --------- WebSockets --------- {% endcomment %}
                        <tr id="tr_toggle_ws_channel_id" class="zato-toggle zato-toggle-wsx zato-toggle-hidden">
                            <td style="vertical-align:middle">WSX channel</td>
                            <td>{{ create_form.ws_channel_id }} </td>
                        </tr>

                        {% comment %} --------- Service --------- {% endcomment %}
                        <tr id="tr_toggle_service_id" class="zato-toggle zato-toggle-srv zato-toggle-hidden">
                            <td style="vertical-align:middle">Service</td>
                            <td>{{ create_form.service_id }} </td>
                        </tr>

                        <tr>
                            <td style="vertical-align:middle">Topics allowed</td>
                            <td>{{ create_form.topic_patterns }} </td>
                        </tr>

                        <tr>
                            <td colspan="2" style="text-align:right">
                                <input type="submit" value="OK" />
                                <button type='button' onclick='javascript:$.fn.zato.data_table.close(this)'>Cancel</button>
                            </td>
                        </tr>
                    </table>
                    <input type="hidden" name="is_active" value="on" />
                    <input type="hidden" name="is_internal" value="" />
                    <input type="hidden" id="cluster_id" name="cluster_id" value="{{ cluster_id }}" />
                </form>
            </div>
        </div>

        <div id="edit-div" class='data-popup ignore'>
            <div class="bd">
                <form novalidate action="{% url "pubsub-endpoint-edit" %}" method="post" id="edit-form">
                    <table class="form-data">

                        <tr>
                            <td style="vertical-align:middle; width:15%">Name</td>
                            <td>{{ edit_form.name }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle; width:15%">Type</td>
                            <td>{{ edit_form.endpoint_type }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">Role</td>
                            <td>{{ edit_form.role }} </td>
                        </tr>

                        {% comment %} --------- REST --------- {% endcomment %}
                        <tr id="edit-tr_toggle_security_id" class="zato-toggle-edit zato-toggle-rest-edit zato-toggle-visible-edit">
                            <td style="vertical-align:middle">API client credentials</td>
                            <td>{{ edit_form.security_id }} </td>
                        </tr>

                        {% comment %} --------- WebSockets --------- {% endcomment %}
                        <tr id="edit-tr_toggle_ws_channel_id" class="zato-toggle-edit zato-toggle-wsx-edit zato-toggle-hidden-edit">
                            <td style="vertical-align:middle">WSX channel</td>
                            <td>{{ edit_form.ws_channel_id }} </td>
                        </tr>

                        {% comment %} --------- Service --------- {% endcomment %}
                        <tr id="edit-tr_toggle_service_id" class="zato-toggle-edit zato-toggle-srv-edit zato-toggle-hidden-edit">
                            <td style="vertical-align:middle">Service</td>
                            <td>{{ edit_form.service_id }} </td>
                        </tr>

                        <tr>
                            <td style="vertical-align:middle">Topics allowed</td>
                            <td>{{ edit_form.topic_patterns }} </td>
                        </tr>

                        <tr>
                            <td colspan="2" style="text-align:right">
                                <input type="submit" value="OK" />
                                <button type='button' onclick='javascript:$.fn.zato.data_table.close(this)'>Cancel</button>
                            </td>
                        </tr>
                    </table>
                    <input type="hidden" name="edit-is_active" value="on" />
                    <input type="hidden" name="edit-is_internal" value="" />
                    <input type="hidden" id="id_edit-cluster_id" name="cluster_id" value="{{ cluster_id }}" />
                    <input type="hidden" id="id_edit-id" name="id" />
                </form>
            </div>
        </div>

    {% endif %} {% comment %}cluster_id{% endcomment %}

{% endif %}{% comment %}not zato_clusters{% endcomment %}

{% endblock %}
